<style>
.user-info-mid {
    width: 100%;
    display: flex;
    background: white;
    border-radius: 5px;
    .user-info-mid-left{
        display: flex;
        flex-direction: column; 
        .user-info-mid-left-row{
            width: 100px;
        }
        .nav-list{
            display: flex;
            flex-direction: column;
            margin-right: 10px;
            .nav-option{
                padding: 0 10px;
                margin: 10px 0;
                p{
                    position: relative;
                    left: 0;
                    transition: left 0.5s;
                }
                p:hover{
                    left: -10px;
                }
            }
        }
    }
    .user-info-mid-right{
        width: calc(100% - 100px);
    }
}
a {
    color: inherit;      /* 使用父元素的颜色 */
    text-decoration: none; /* 去除下划线 */
}
.navActive{
    border-right: #b8db70 solid 5px;
}
</style>
<template>
    <div class="user-info-mid">
        <div class="user-info-mid-left">
            <div class="user-info-mid-left-row">
                <nav class="nav-list">
                    <router-link :to="{ name: item.value }" v-for="(item, index) in leftOption" :key="index" class="nav-option" 
                    :class="{ navActive: index == navSelect }">
                        <p @click="navSelect = index">{{ item.label }}</p>
                    </router-link>
                </nav>
            </div>
        </div>
        <div class="user-info-mid-right">
            <router-view />
        </div>
    </div>
</template>
<script>
export default {
    name: 'userInfoMid',
    props: {

    },
    data() {
        return {
            navSelect: 0,
            leftOption: [
                {
                    label: "浏览记录",
                    value: "myPost"
                },
                {
                    label: "我的收藏",
                    value: "myCollect"
                }
            ]
        }
    },
}
</script>